<template>
  <div class="favor">
    <van-sticky>
      <navBar :is-right-arrow="true">
        <van-tabs v-model:active="tabActive" type="card" shrink>
          <van-tab
            v-for="(item, index) in titles"
            :title="item"
            :key="index"
          ></van-tab>
        </van-tabs>
      </navBar>
    </van-sticky>
    <!-- 根据tabActive  我的收藏 -->
    <div v-if="tabActive === 0">
      <van-tabs v-model:active="collectActive">
        <van-tab title="房屋">
          <HouseList :list-data="favorList" />
        </van-tab>
        <van-tab title="房东">
          <div class="nodata">
            <img
              class="nodata-img"
              src="../../assets/img/favor/empty_favorite.44731802.png"
              alt=""
            />
            <div class="nodata-name">暂无收藏</div>
            <div class="nodata-btn" @click="clickToHome">随便去逛逛</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 根据tabActive  浏览历史 -->
    <div v-else class="content">
      <HouseList :list-data="historyList" />
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { ref } from "vue";
import navBar from "../../components/nav-bar/nav-bar.vue";
import HouseList from "../../components/house-list/house-list.vue";
import useFavorStore from "../../stores/modules/favorStore";

// 通过favorStore发送网络请求
const favorStore = useFavorStore();
favorStore.fetchFavorList();
favorStore.fetchHistoryList();
const { favorList, historyList } = storeToRefs(favorStore);

// 切换标题
const titles = ["我的收藏", "浏览历史"];
// 选中的tab
const tabActive = ref(0);
// 选中的收藏tab
const collectActive = ref(0);
const clickToHome = () => {};
</script>

<style lang="less" scoped>
.van-tabs__wrap {
  height: 100%;
}
.favor {
  --van-tabs-default-color: var(--color);
  --van-tabs-card-height: 100%;
}
.nodata {
  width: 100%;
  text-align: center;
  .nodata-img {
    margin-top: 20px;
    width: 100%;
  }
  .nodata-name {
    color: #000;
    font-size: 20px;
  }
  .nodata-btn {
    margin: 10px auto;
    width: 50%;
    letter-spacing: 2px;
    background-color: var(--color);
    color: #fff;
    font-size: 20px;
    border-radius: 15px;
    padding: 4px;
  }
}
</style>
